<template>
  <div>
    <!-- 调用方访问情况内容 -->
    <div class="AccessSituation">
      <div class="AccessSituationTop">
        <div>
          <span>访问时间</span>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
        <el-table-column prop="date" label="调用方名称"> </el-table-column>
        <el-table-column prop="name" label="服务名称"> </el-table-column>
        <el-table-column prop="address" label="访问日期"> </el-table-column>
        <el-table-column prop="address" label="访问次数"> </el-table-column>
        <el-table-column prop="address" label="成功访问次数"> </el-table-column>
        <el-table-column prop="address" label="失败访问次数"> </el-table-column>
        <el-table-column prop="address" label="成功率"> </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="sizes, prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: "",
      value: "",
      input3: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      tableData: [],
      currentPage: 5,
    };
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style type="scss" scoped>
.AccessSituationTop {
  display: flex;
  justify-content: space-between;

  .input-with-select {
    width: 220px;
  }
}
.pagination {
  display: flex;
  justify-content: flex-end; /* 将子元素靠右对齐 */
  margin-top: 10px;
}
</style>